<template>
  <div class="service-box">
    <span class="demonstration">商品标签：</span>
    <el-cascader v-model="value" :options="list" :props="props" placeholder="请选择商品标签" clearable style="width: 256px;" @change="getGoods" />
  </div>
</template>

<script>
import { getGroupTagList } from '@/api/order'
export default {
  name: 'GoodsGroupTag',
  data() {
    return {
      props: { multiple: true, emitPath: false },
      value: '',
      list: []
    }
  },
  created() {
    this.getGroupTagLists()
  },
  methods: {
    getGoods(value) {
      this.$emit('getLable', value)
    },
    convertKey(arr, key) {
      const newArr = []
      arr.forEach((item, index) => {
        const newObj = {}
        for (var i = 0; i < key.length; i++) {
          newObj[key[i]] = item[Object.keys(item)[i]]
        }
        newArr.push(newObj)
      })
      return newArr
    },
    async getGroupTagLists() {
      const res = await getGroupTagList()
      if (res.code === 10000) {
        const data = res.data.items
        const subObj = this.convertKey(data, ['value', 'label', 'children'])
        subObj.map(item => {
          item.children = this.convertKey(item.children, ['value', 'label'])
        })
        this.list = subObj
      }
    }
  }
}
</script>
<style lang="scss">
  .el-cascader__tags{
    flex-wrap:nowrap !important;
    overflow: auto !important;
    left:5px !important;
  }
   .el-cascader__tags::-webkit-scrollbar {
    display: none !important;
}
</style>
